<template>
  <div>
    <el-form :model="userForm" label-width="auto" style="max-width: 600px"></el-form>
    <el-form-item>
      <!-- 如果想在ElementUI中使用变色的label 在el-from以及el-form-item中设置style或者label-color是不行的 -->
      <span slot="label">
        <span style="color: red; font-weight: bold">*</span>
        <span style="font-size: 18px">账号:</span>
      </span>
      <el-input
        v-model="userForm.userID"
        style="width: 310px; margin-left: 18px; height: 40px"
        placeholder="请输入指挥人员账号"
        :prefix-icon="Search"
      />
    </el-form-item>
    <el-form-item>
      <span slot="label">
        <span style="color: red; font-weight: bold">*</span>
        <span style="font-size: 18px">密码：</span>
      </span>
      <el-input
        v-model="userForm.password"
        style="width: 310px; margin-left: 6px; height: 40px"
        placeholder="请输入指挥人员密码"
        :prefix-icon="Lock"
        show-password
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="button" @click="login" :plain="true"
        >登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button
      >
    </el-form-item>
  </div>
</template>

<script setup>
import {ref,inject} from "vue" 
import { useRouter } from "vue-router";
import { Lock, Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
const axios = inject("axios")
const userForm = ref({
  userID:"",
  password:"",
  role:"指挥人员"
})
const router = useRouter()
const user = ref({})
const login =  async() => {
  // 表单验证
  
  await axios.post('Director/getUserName',{
    userID:userForm.value.userID,
    password:userForm.value.password
  }).then( (response) => {  
    user.value = response.data;
    console.log(user.value)
  })
  .catch((error) => {
    console.log(error);
  });
  if (userForm.value.userID== "" || userForm.value.password == "") 
  {
    ElMessage({
    message: '登录失败，请输入完整信息！',
    type: 'warning',
    plain: true,
  })
  } 
  else if (user.value.role == userForm.value.role)//在API已经验证password 
   { 
    sessionStorage.setItem("user", JSON.stringify(user));
    ElMessage({
    message: '指挥人员登录成功！',
    type: 'success',  
    plain: true,
  })
  console.log(user.value)  
    router.push({
      path: "/IndexD",
      query:{userID:userForm.value.userID}
    }); 
  } else {    

    console.log(user.value)  

    ElMessage.error('登录失败，请检查密码是否正确！')
  }
};
</script>
  
<style scoped>
.el-form-item {
  display: flex;
}
.button {
  margin-top: 10px;
  margin-left: 0px;
  width: 400px;
  height: 40px;
  font-size: 20px;
  font-weight: bold;
}
</style>